<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
    //21-05-07 整理 
// 21. 节流和防抖 
// 函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。
// 函数节流   滚动条滚动
var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){ 
        return;  // 判断是否已空闲，如果在执行中，则直接return
    }
    canRun = false;
    setTimeout(function(){
        console.log("函数节流");
        canRun = true;
    }, 300);};

// 函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内
// 如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。
// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
    clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
    timer = setTimeout(function(){
        console.log("函数防抖");
    }, 300); } ;    


//21-05-07 博客摘录  --------------------------------------------
    // 1防抖节流并不是出现在软件工程中的 防抖是出现在电子元件中的 节流出现在流动体中 
    // js是事件驱动的 大量的操作触发事件 加入到事件队列中处理 频繁事件处理消耗性能 即通过防抖&节流限制事件频繁触发
    // 防抖&节流函数 是前端开发两个重要的函数 面试常见 案例了解原理 自己编写 
    


    //为什么需要节防抖 ？ 举个例子 
/*    比如说 今天上完课 我问大家有什么问题没有 我会等待一分钟时间 
如果在这一分钟之内 没有同学问我 我就下课。在此期间 a过来问问题 解答
完后 我会再等一分钟的时间 看有没有其他的同学问问题 如果我等待超过1分钟 就点击下课 
(才真正执行这个时间)
*/    

    //再举个例子 场景 搜索框(在某个搜索框中输入想搜索的内容)
/*    比如说 想搜索有个MacBook 
当输入m时 为了用户体验 通常机会出现对应的联想内容 这些联想的内容时保存在服务器中的 所有需要一次网路请求 
当继续输入ma时 再次发送网络请求  就是说macbook需要发送7次请求 啰嗦！消耗了整个系统的性能 前端事件处理 对于服务器的鸭梨
      但是我们需要发送则么多的请求嘛？  
不需要 正确的做法是在合适的情况下 再次发送网络请求 
比如说如果用户 快速的输入macbook 那么只是发送一次网络请求  
比如说如果用户 输入了一个m 想了一会这个时候就应该 发送一次请求了
也就是说 监听用户在某个时间 比如500ms内 没有再次触发时间时 再次发送网络请求  
      这就是防抖操作 
只有在某个时间段内 没有再次触发某个函数时 才真正的调用这个函数 
当事件触发时 相应的函数并不会立即触发 而是等待一段时间 当事件密集触发时 函数的触发会被频繁的推迟 只有等待了一段时间也没有事件触发 才会执行响应函数 
      防抖的应用场景在哪里？
输入框中频繁的输入内容 搜索或者提交信息 
频繁的点击按钮 触发某个事件 
监听浏览器滚动事件 完成某些特定操作  用户缩放浏览器的resize事件 
*/    
     //总之 密集的事件触发 只希望比较靠后的发生事件 就可以使用防抖函数 
    


      //为什么需要节流 ？ 
/*    举个例子 飞机大战小游戏 按键速度很快  子弹也会保持一定的频率发射出来 
比如1s中只能发射10次 用户在1s中按键了10次  子弹会保持发射一颗的频率 即事件是触发了10次 响应的函数只触发一次 这就是节流 
在某个 时间段内 比如500ms 某个函数只能被触发一次 
*/      





</script>